<template>
    <view class="container">
        <view class="auth-container">
            <!-- 按钮组 -->
            <view class="btn-group">
                <button class="btn" :class="{'btn-primary': showLogin, 'btn-outline': !showLogin}" @click="toggleForm('login')">登录</button>
                <button class="btn" :class="{'btn-primary': !showLogin, 'btn-outline': showLogin}" @click="toggleForm('register')">注册</button>
            </view>

            <!-- 登录表单 -->
            <view class="form-card" v-if="showLogin">
                <view class="card-header">
                    <text class="title">用户登录</text>
                </view>
                <view class="card-body">
                    <form @submit="handleLogin">
                        <view class="form-item">
                            <text class="label">用户名/邮箱/手机号</text>
                            <input type="text" v-model="loginForm.identifier" placeholder="请输入账号" />
                        </view>
                        <view class="form-item">
                            <text class="label">密码</text>
                            <input type="password" v-model="loginForm.password" placeholder="请输入密码" />
                        </view>
                        <view class="form-item checkbox">
                            <checkbox :checked="loginForm.rememberMe" @change="(e) => loginForm.rememberMe = e.detail.value" />
                            <text class="checkbox-label">记住我</text>
                        </view>
                        <button class="submit-btn" form-type="submit">登录</button>
                    </form>
                </view>
            </view>

            <!-- 注册表单 -->
            <view class="form-card" v-else>
                <view class="card-header">
                    <text class="title">用户注册</text>
                </view>
                <view class="card-body">
                    <form @submit="handleRegister">
                        <view class="form-item">
                            <text class="label">用户名</text>
                            <input type="text" v-model="registerForm.username" placeholder="请输入用户名" />
                            <text class="hint">必填，用于登录</text>
                        </view>
                        <view class="form-item">
                            <text class="label">姓名</text>
                            <input type="text" v-model="registerForm.fullName" placeholder="请输入姓名" />
                            <text class="hint">必填，您的真实姓名</text>
                        </view>
                        <view class="form-item">
                            <text class="label">邮箱</text>
                            <input type="email" v-model="registerForm.email" placeholder="请输入邮箱" />
                            <text class="hint">选填，可用于登录</text>
                        </view>
                        <view class="form-item">
                            <text class="label">手机号</text>
                            <input type="number" v-model="registerForm.phone" placeholder="请输入手机号" />
                            <text class="hint">选填，可用于登录</text>
                        </view>
                        <view class="form-item">
                            <text class="label">密码</text>
                            <input type="password" v-model="registerForm.password" placeholder="请设置密码" />
                            <text class="hint">必填，请设置登录密码</text>
                        </view>
                        <view class="form-item">
                            <text class="label">确认密码</text>
                            <input type="password" v-model="registerForm.confirmPassword" placeholder="请再次输入密码" />
                            <text class="hint">必填，请再次输入密码</text>
                        </view>
                        <button class="submit-btn" form-type="submit">注册</button>
                    </form>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            showLogin: true,
            loginForm: {
                identifier: '',
                password: '',
                rememberMe: false
            },
            registerForm: {
                username: '',
                fullName: '',
                email: '',
                phone: '',
                password: '',
                confirmPassword: ''
            }
        }
    },
    methods: {
        toggleForm(type) {
            this.showLogin = type === 'login'
        },
        async handleLogin() {
            // 模拟登录成功
            try {
                // const response = await this.request({
                //     url: '/api/v1/auth/login',
                //     method: 'POST',
                //     data: {
                //         username: this.loginForm.identifier,
                //         password: this.loginForm.password
                //     }
                // });
                
                // 模拟成功响应
                const response = {
                    success: true,
                    access_token: 'mock_token',
                    token_type: 'bearer',
                    user: {
                        username: this.loginForm.identifier,
                        full_name: '测试用户'
                    }
                };

                // 保存认证信息
                uni.setStorageSync('access_token', response.access_token);
                uni.setStorageSync('token_type', response.token_type);
                uni.setStorageSync('user_info', response.user);
                
                if (this.loginForm.rememberMe) {
                    uni.setStorageSync('remember_me', 'true');
                }

                uni.showToast({
                    title: '登录成功',
                    icon: 'success'
                });

                // 跳转到首页
                uni.switchTab({
                    url: '/pages/index/index'
                });
            } catch (error) {
                uni.showToast({
                    title: error.message || '登录失败',
                    icon: 'none'
                });
            }
        },
        async handleRegister() {
            try {
                // 表单验证
                if (this.registerForm.password !== this.registerForm.confirmPassword) {
                    throw new Error('两次输入的密码不一致');
                }

                if (this.registerForm.password.length < 6) {
                    throw new Error('密码长度不能少于6位');
                }

                // const response = await this.request({
                //     url: '/api/v1/admin/users/',
                //     method: 'POST',
                //     data: {
                //         username: this.registerForm.username,
                //         full_name: this.registerForm.fullName,
                //         email: this.registerForm.email || null,
                //         phone: this.registerForm.phone || null,
                //         password: this.registerForm.password
                //     }
                // });

                // 模拟成功响应
                const response = {
                    success: true,
                    message: '注册成功'
                };

                uni.showToast({
                    title: '注册成功',
                    icon: 'success'
                });

                // 重置表单
                this.registerForm = {
                    username: '',
                    fullName: '',
                    email: '',
                    phone: '',
                    password: '',
                    confirmPassword: ''
                };

                // 切换到登录表单
                this.toggleForm('login');
            } catch (error) {
                uni.showToast({
                    title: error.message || '注册失败',
                    icon: 'none'
                });
            }
        }
    }
}
</script>

<style>
.container {
    min-height: 100vh;
    padding: 20px;
    background-color: #f8f9fa;
}

.auth-container {
    max-width: 600rpx;
    margin: 40rpx auto;
}

.btn-group {
    display: flex;
    justify-content: center;
    gap: 20rpx;
    margin-bottom: 30rpx;
}

.btn {
    min-width: 200rpx;
    padding: 20rpx 40rpx;
    border-radius: 8rpx;
    font-size: 32rpx;
}

.btn-primary {
    background-color: #0d6efd;
    color: #ffffff;
}

.btn-outline {
    background-color: transparent;
    color: #0d6efd;
    border: 2rpx solid #0d6efd;
}

.form-card {
    background-color: #ffffff;
    border-radius: 15rpx;
    box-shadow: 0 0 20rpx rgba(0,0,0,0.1);
    overflow: hidden;
}

.card-header {
    padding: 30rpx;
    text-align: center;
    border-bottom: 2rpx solid #f0f0f0;
}

.title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
}

.card-body {
    padding: 30rpx;
}

.form-item {
    margin-bottom: 30rpx;
}

.label {
    display: block;
    margin-bottom: 10rpx;
    font-size: 28rpx;
    color: #495057;
    font-weight: 500;
}

.hint {
    display: block;
    margin-top: 6rpx;
    font-size: 24rpx;
    color: #6c757d;
}

input {
    width: 100%;
    height: 80rpx;
    padding: 0 20rpx;
    border: 2rpx solid #dee2e6;
    border-radius: 8rpx;
    font-size: 28rpx;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 10rpx;
}

.checkbox-label {
    font-size: 28rpx;
    color: #495057;
}

.submit-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background-color: #0d6efd;
    color: #ffffff;
    font-size: 32rpx;
    border-radius: 8rpx;
    text-align: center;
    margin-top: 20rpx;
}

.submit-btn:active {
    opacity: 0.8;
}
</style> 